<template>
  <div class="main">
    <div class="common-layout">
      <el-container class="el-container-main">
        <el-aside :width="isCollapse ? '60px' : '150px'" class="aside-main">
          <NavMenu :collapse="isCollapse" />
        </el-aside>
        <el-container>
          <el-header class="header-main">
            <NavHeader @foldchange="flodchange" />
          </el-header>
          <el-main class="main-main">
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import NavMenu from "@/components/nav-menu";
import NavHeader from "@/components/nav-header";
export default defineComponent({
  components: {
    NavMenu,
    NavHeader
  },
  setup() {
    const isCollapse = ref(false);
    const flodchange = (isFlod: boolean) => {
      isCollapse.value = isFlod;
    };
    return {
      flodchange,
      isCollapse
    };
  }
});
</script>

<style scoped lang="less">
.main {
  height: 100%;
  .common-layout {
    height: 100%;
    .el-container-main {
      height: 100%;

      .aside-main {
        // background-color: #003153;
        background-color: #425066;
      }
      .header-main {
        padding: 15px;
        // background-color: #ccff00;
      }
      .main-main {
        background-color: #e3dfdfc2;
      }
    }
  }
}
</style>
